<template>
  <div>
    <!-- 提示更新 -->
    <el-dialog
      class="app_update_dialog"
      modal-class="app_update_dialog_model"
      v-model="dialogVisible"
      width="500px"
      center
      :show-close="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="app_dialog_header">
          <div class="app_dialog_header_verison">您当前使用版本为{{ activeverison }}</div>
          <div style="cursor: pointer" @click="windowAllClosed()">
            <img style="width: 24px; height: 24px; margin: 66px 14px 0 0" :src="del" />
          </div>
        </div>
      </template>
      <div class="app_update_dialog_body">
        <div class="app_update_dialog_body_version">V{{ newveverison }}版本</div>
        <div class="app_update_dialog_body_content">
          <el-scrollbar height="100%">
            <div class="update_dialog_text1">优化及修复问题:</div>
            <div v-for="(item, index) in optimizecontent" :key="index">{{ index + 1 }}、{{ item }}</div>
          </el-scrollbar>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            style="color: #778090; border-radius: 5px; width: 112px; height: 40px"
            @click="windowAllClosed()"
          >
            稍后再说
          </el-button>
          <el-button
            type="primary"
            style="border-radius: 5px; width: 112px; height: 40px"
            @click="startupdate()"
          >
            立即更新
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 更新进度 -->
    <el-dialog
      class="app_updateprogress_dialog"
      v-model="progressdialogVisible"
      width="500px"
      :show-close="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="app_updateprogress_header">
          <div style="cursor: pointer" @click="progressdialogVisible = false">
            <img style="width: 24px; height: 24px" :src="delgray" />
          </div>
        </div>
      </template>
      <div class="app_updateprogress_dialog_body">
        <div class="app_updateprogress_dialog_num">{{ percentage }}%</div>
        <div class="app_updateprogress_dialog_progress">
          <el-progress
            style="width: 400px"
            status="success"
            :stroke-width="20"
            :percentage="percentage"
            :width="strokeWidth"
            :show-text="false"
          ></el-progress>
        </div>
        <div class="app_updateprogress_dialog_text">{{ dialogtitle }}</div>
      </div>

      <template #footer>
        <div class="dialog-footer" style="margin: 24px 0 40px 0">
          <el-button
            type="primary"
            :disabled="showbutton"
            style="border-radius: 5px; width: 112px; height: 40px"
            @click="installapp"
          >
            立即更新
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import del from '@/assets/updata/del-default.png'
import delgray from '@/assets/updata/del-gray.png'
import { getVersion } from '@/utils/getVersion'
import { windowAllClosed } from '@/utils/windowAllClosed'
// import { ipcRenderer } from 'electron'
import config from '@/config'
const dialogVisible = ref(false) //提示更新显示

const progressdialogVisible = ref(false) //更新进度
const activeverison = ref('')
const newveverison = ref('')
const dialogtitle = ref('下载中...')
const optimizecontent = ref([])

const percentage = ref(0)
const strokeWidth = ref(200)
const showbutton = ref(true)

const startupdate = () => {
  dialogtitle.value = '下载中...'
  dialogVisible.value = false
  progressdialogVisible.value = true
  percentage.value = 0
  window.electron.startupdate('开始更新')
}
const installapp = () => {
  window.electron.installsend('安装')
}

onMounted(async () => {
  activeverison.value = await getVersion()
  if (window.electron) {
    window.electron.onUpdateavailable((event, msg) => {
      let arr = JSON.parse(msg.releaseNotes.replace(/\s+/g, ''))
      optimizecontent.value = arr.currentnotes
      newveverison.value = msg.version
      dialogVisible.value = true
      progressdialogVisible.value = false
    })
    window.electron.onUpdate((event, msg) => {
      dialogtitle.value = '下载中...'
      // progressdialogVisible.value = true
      percentage.value = msg.percent
      showbutton.value = true
    })
    window.electron.onDownloaded((event, msg) => {
      dialogtitle.value = '新版本已下载完成!'
      percentage.value = 100
      progressdialogVisible.value = true
      showbutton.value = false
    })
  }
})
</script>

<style lang="scss" scoped>
.app_dialog_header {
  background-image: url('@/assets/updata/update_app.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 500px;
  height: 240px;
  background-color: transparent;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.app_dialog_header_verison {
  position: absolute;
  bottom: 88px;
  left: 48px;
  font-size: 16px;
  color: #fff;
}

.app_update_dialog_body {
  background-color: #fff;
  padding: 16px 48px 0 48px;
  font-family: PingFangSC;
}

.app_update_dialog_body_version {
  font-size: 20px;
  font-weight: 600;
  color: #252a30;
}
.app_update_dialog_body_content {
  margin: 16px 0 0 0;
  height: 184px;
  border-radius: 4px;
  border: solid 1px #ebebeb;
  padding: 14px 0 18px 16px;
  font-size: 14px;
  line-height: 1.71;
  color: #778090;
}

.update_dialog_text1 {
  font-weight: 600;
  margin-bottom: 24px;
}


.app_updateprogress_header {
  display: flex;
  justify-content: flex-end;
}
.app_updateprogress_dialog_body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app_updateprogress_dialog_num {
  font-size: 28px;
  font-weight: bold;
  color: #47acff;
}
.app_updateprogress_dialog_progress {
  margin: 16px 0;
  height: 20px;
}

.app_updateprogress_dialog_text {
  font-size: 14px;
  color: #252a30;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>

<style>
.app_update_dialog {
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  font-family: PingFangSC;
}
.app_update_dialog .el-dialog__header {
  padding-bottom: 0;
}
.app_updateprogress_dialog .el-dialog__header {
  padding-bottom: 0;
}

.app_update_dialog .el-dialog__footer {
  background-color: #fff;
  padding: 40px 0;
}
.app_update_dialog_model {
  background-color: rgba(37, 42, 48, 0.7);
}

.app_updateprogress_dialog_progress .el-progress-bar__inner {
  background-image: linear-gradient(to left, #81eff7, #47acff);
}
.app_updateprogress_dialog_progress .el-progress-bar__outer {
  background-color: #ebebeb;
}

.app_updateprogress_dialog .el-dialog__footer .is-disabled {
  background-color: rgba(71, 172, 255, 0.3);
  border: none;
}
</style>